import { Link, useNavigate } from 'react-router-dom';
import { http } from '@/utils';
import {
	Card,
	Breadcrumb,
	Form,
	Button,
	Radio,
	DatePicker,
	Select,
	Table,
	Tag,
	Space,
	Popconfirm,
} from 'antd';
import locale from 'antd/es/date-picker/locale/zh_CN';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons';
import './index.scss';
import { useEffect } from 'react';
import { useState } from 'react';
import { useStore } from '../../store';

const { Option } = Select;
const { RangePicker } = DatePicker;
const Article = () => {
	/*
	 * @desc: 获取频道列表
	 * @param: no
	 * @date:
	 * @author:szd
	 */
	const { ChannelStore } = useStore()
	useEffect(() => {
		ChannelStore.getChannelList()
	}, [ChannelStore])

	/* 请求列表参数 */
	const [params, setParams] = useState({
		page: 1,
		per_page: 10,
	});

	/*
	 * @desc: 获取文章列表
	 * @param: no
	 * @date:
	 * @author:szd
	 */
	const [articleData, setArticleData] = useState({
		list: [],
		total: 0,
	});
	useEffect(() => {
		const loadList = async () => {
			console.log({ params });
			const res = await http.get('/mp/articles', { params });
			const { results, total_count } = res.data;
			setArticleData({
				list: results,
				total: total_count,
			});
		};
		loadList()
	}, [params])
	/*
	 * @desc: 根据输入的条件进行筛选
	 * @param:
	 * @date:
	 * @author:szd
	 */
	const onFinish = values => {
		const { channel_id, date, status } = values
		const _params = {};
		_params.status = status
		if (channel_id) _params.channel_id = channel_id
		if (date) {
			_params.begin_pubdate = date[0].format('YYYY-MM-DD')
			_params.end_pubdate = date[1].format('YYYY-MM-DD')
		}
		setParams({
			...params,
			..._params,
		})
	};
	/*
	 * @desc: 删除文章
	 * @param:id
	 * @date:
	 * @author:szd
	 */
	const deleteItem = async id => {
		await http.delete(`/mp/articles/${id}`);
		setParams({
			...params,
			page: 1,
		});
	};
	/*
	 * @desc: 点击编辑,进入发布文章页面
	 * @param: id
	 * @date:
	 * @author:szd
	 */
	const navigation = useNavigate();
	const goPublishPage = id => {
		navigation(`/publish?id=${id}`);
	};
	/* 分页 */
	const onChange = page => {
		setParams({ ...params, page });
	};
	const statusList = [
		{ value: -1, name: '全部' },
		{ value: 0, name: '草稿' },
		{ value: 1, name: '待审核' },
		{ value: 2, name: '审核通过' },
		{ value: 3, name: '审核失败' },
	]
	/* 表格列数据 */
	const columns = [
		{
			title: '封面',
			dataIndex: 'cover',
			width: 120,
			render: cover => {
				return (
					<img
						src={
							cover.images[0] ||
							'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
						}
						width={80}
						height={60}
						alt=""
					/>
				);
			},
		},
		{
			title: '标题',
			dataIndex: 'title',
			width: 220,
		},
		{
			title: '状态',
			dataIndex: 'status',
			render: data => <Tag color="green">审核通过</Tag>,
		},
		{
			title: '发布时间',
			dataIndex: 'pubdate',
		},
		{
			title: '阅读数',
			dataIndex: 'read_count',
		},
		{
			title: '评论数',
			dataIndex: 'comment_count',
		},
		{
			title: '点赞数',
			dataIndex: 'like_count',
		},
		{
			title: '操作',
			render: data => {
				return (
					<Space size="middle">
						<Button
							onClick={() => goPublishPage(data.id)}
							type="primary"
							shape="circle"
							icon={<EditOutlined />}
						/>
						<Popconfirm
							title="提示"
							description="此操作不可恢复，确定删除吗?"
							onConfirm={() => deleteItem(data.id)}
							okText="Yes"
							cancelText="No"
						>
							<Button
								type="primary"
								danger
								shape="circle"
								icon={<DeleteOutlined />}
							/>
						</Popconfirm>
					</Space>
				);
			},
		},
	];
	return (
		<div>
			<Card
				/* 待优化 */
				title={
					<Breadcrumb separator=">">
						<Breadcrumb.Item>
							<Link to="/">首页</Link>
						</Breadcrumb.Item>
						<Breadcrumb.Item>内容管理</Breadcrumb.Item>
					</Breadcrumb>
				}
				style={{ marginBottom: 20 }}
			>
				<Form onFinish={onFinish} initialValues={{ status: -1 }}>
					<Form.Item label="状态" name="status">
						<Radio.Group>
							{
								statusList.map(item => (<Radio value={item.value}>{item.name}</Radio>))
							}
						</Radio.Group>
					</Form.Item>

					<Form.Item label="频道" name="channel_id">
						<Select placeholder="请选择文章频道" style={{ width: 300 }}>
							{ChannelStore.channelList.map(channel => (
								<Option key={channel.id} value={channel.id}>
									{channel.name}
								</Option>
							))}
						</Select>
					</Form.Item>

					<Form.Item label="日期" name="date">
						{/* 传入locale属性 控制中文显示*/}
						<RangePicker locale={locale}></RangePicker>
					</Form.Item>
					<Form.Item>
						<Button type="primary" htmlType="submit" style={{ marginLeft: 80 }}>
							筛选
						</Button>
					</Form.Item>
				</Form>
				<h5>一共{articleData.total}条数据</h5>
				<Table
					rowKey="id"
					dataSource={articleData.list}
					columns={columns}
					pagination={{
						pageSize: params.per_page,
						total: articleData.total,
						onChange: onChange,
						current: params.page,
					}}
				/>
			</Card>
		</div>
	);
};

export default Article;
